import type { Meta, StoryObj } from '@storybook/vue3';
import CrudTable from "@/components/crud/table/CrudTable.vue";
import {createCrudTableColumn} from "@/components/crud/CrudTableColumn";
import {FormConfig} from "@/components/crud/types";
// 定义表单配置
const formConfig: FormConfig[] = [
  {
    title: '姓名',
    field: 'name',
    rules: [
      { required: true, message: '请输入姓名', trigger: 'blur' },
    ],
    component: {
      name: 'el-input',
      width: 100,
      attrs: {
        placeholder: '请输入姓名',
      },
    },
  }
];

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const meta = {
  title: 'Crud/Table',
  component: CrudTable,
  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ['crud', 'table'],
} satisfies Meta<typeof CrudTable>;

export default meta;
type Story = StoryObj<typeof meta>;
/*
 *👇 Render functions are a framework specific feature to allow you control on how the component renders.
 * See https://storybook.js.org/docs/api/csf
 * to learn how to use render functions.
 */
export const Primary: Story = {
  args: {
    createConfig: formConfig,
    updateConfig: formConfig,
    url: 'tests',
    filterOptions: [
      {
        field: 'name',
        title: '姓名',
        operator: '$contains',
        value: '',
        component: {
          name: 'el-input',
          attrs: {
            placeholder: '请输入姓名',
          }
        }
      },
      {
        field: 'age',
        title: '年龄',
        operator: '$contains',
        value: undefined,
        component: {
          name: 'el-input-number',
          attrs: {
            placeholder: '请输入年龄',
            min: 0,
            max: 120
          }
        }
      }
    ],
    detailOptions: [
      {
        field: 'name',
        title: '姓名',
      }
    ],
    columns: [
      createCrudTableColumn({
        field: 'name',
        title: '姓名',
        width: 150,
      })
    ]
  },
};

